<template>
	<view class="root">
	<view class="wrapper-row {{padding?'padding-tb-sm':''}}" catch:tap="openClose">
	  <view class="font24  text-666"
	        style="max-width:{{width}};overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
	    {{current.name?current.name:result[0].name}}
	    {{m1.fiterName(current.name?current.name:result[0].name,isFiter)}}
	  </view>
	  <view class="cuIcon-unfold text-green font30 margin-left-xs {{isShow?'rotate180':''}}"></view>
	  <view class="cuIcon-unfold text-green font24  {{isShow?'rotate180':''}}" style="margin-left:6rpx"></view>
	</view>
	  <scroll-view scroll-y="true" wx:if="{{isShow}}" class="select-box" enhanced="true" show-scrollbar="true" style="top:{{padding?'90':'50'}}rpx;max-height:800rpx" >
	  <view wx:for="{{result}}" wx:key="unique" class="wrapper-row" catch:tap="optionTap"  >
	    <view class="select-one font28" data-index="{{index}}"
	          style="width:100%" >{{item.name}}
	          style="width:100%; text-align: {{align}}};" >{{item.name}}
	    </view>
	  </view>
	  </scroll-view>
	</view>
</template>

<script>
	name:"selecy-view",
	props: {
	 options: {
	      type: Array,
	      value: []
	    },
	    defaultOption: {
	      type: Object,
	      value: {
	        id: '',
	        name: ''
	      }
	    },
	    defaultName: {
	      type: String,
	      value: ''
	    },
	    text: {
	      type: String,
	      value: 'name'
	    },
	    padding: {
	      type: Boolean,
	      value: true
	    },
	    key: {
	      type: String,
	      value: 'id'
	    },
	    isShow: {
	      type: Boolean,
	      value: false
	    },
	    width: {
	      type: String,
	      value: '140rpx'
	    },
	    isFiter: {
	      type: Boolean,
	      value: false
	    },
	    align:{
	      type:String,
	      value:'center'
	    },noClick: {
	      type: Boolean,
	      value: false
	    },
	    size:{
	      type:String,
	      value:'28rpx'
	    }
	},
	data() {
		return {
		};
	}
</script>

<style>
	/* 下拉内容 */
	.select-box {
	  background-color: #FFFFFF;
	  padding: 0rpx 0rpx;
	  float: right;
	  position: absolute;
	  left: 0;
	  min-width: 250rpx;
	  z-index: 998;
	  overflow: hidden;
	  text-align: center;
	  font-size: 28rpx;
	}
	.rotate180{
	  transform: rotate(180deg);
	  transform-origin:50% 50%;
	  transition-duration: 100ms;
	}
	.select-one {
	  min-width: 250rpx;
	  height: 100rpx;
	  position: relative;
	  line-height: 100rpx;
	  border-bottom: 1px solid #eeeeee;
	  margin-left: 4rpx;
	}
	.root {
	  position: relative;
	  width: 100%;
	  z-index: 1111;
	  font-size: 30rpx;
	}

</style>